import React from "react";
import Item, { CardInfoProps } from "./item";
import PinyinText from "@/components/PinyinText";
export default function Dashboard() {
  const cards: CardInfoProps[] = [
    {
      title: "诗人殿堂",
      path: "/poet",
      description:
        "诗人殿堂，是中国古代诗歌的集散地，是中国古代诗歌的发源地，是中国古代诗歌的研究中心。",
    },
    {
      title: "诗歌宝库",
      path: "/poem",
      description: "浏览海量的古诗文，品味古诗的魅力",
    },
    {
      title: "主题分类",
      path: "/type",
      description: "按题材、风格探索不同类型的诗歌作品",
    },
  ];
  return (
    <div className="content p-5 md:p-0 ">
      <section className="text-center space-y-6 py-16">
        <h1 className="text-5xl font-bold bg-gradient-to-r from-emerald-400 to-blue-500 bg-clip-text text-transparent">
          <PinyinText fontSize={3} pyFontSize={1.5} textAlign="center"  text="探索中国诗歌之美" />
        </h1>
        <span className="text-xl text-slate-300 mx-auto">
        <PinyinText  fontSize={1.25} textAlign="center" text="穿越时空，感受千年文化积淀，在这里发现中国古典诗歌的永恒魅力" />
        </span>
      </section>
      <div className="cards flex gap-4 flex-col md:flex-row justify-center items-center w-full">
        {cards.map((card, index) => (
          <Item key={index} {...card} />
        ))}
      </div>
    </div>
  );
}
